<template>
  <section class="container">
    <el-row class="header">
      <el-col :span="24">
        <div class="float-left">
          <!-- <img class="logo" src="../../assets/img/logo.jpg" alt=""> -->
          <span class="name">客户管理系统</span>
        </div>
        <div class="float-right">
          <el-dropdown class="drop-menu" size="medium" @command="dropClick">
            <span class="user-name">{{ userInfo.mobile }}
              <i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">退出</el-dropdown-item>
              <el-dropdown-item command="2">修改密码</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
    <el-row class="content clearfix">
      <div class="side float-left">
        <el-menu class="el-menu-vertical-demo" :default-active="$route.path" unique-opened router :collapse="isCollapse"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#409EFF">
          <template v-for="(item, index) in $router.options.routes">
            <el-menu-item v-if="!item.hidden && !item.multiple" :key="index" :index="item.children[0].path">
              <!-- <i :class="item.icon"></i> -->
              <span slot="title">{{item.children[0].meta.title}}</span>
            </el-menu-item>
            <el-submenu v-if="!item.hidden && item.multiple" :key="index" :index="index.toString()">
              <template slot="title">
                <!-- <i :class="item.icon"></i> -->
                <span slot="title">{{item.meta.title}}</span>
              </template>
              <el-menu-item v-for="(child, idx) in item.children" :key="idx" :index="child.path">
                <i :class="child.icon"></i>
                <span slot="title">{{child.meta.title}}</span>
              </el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </div>
      <div class="content-box">
        <router-view/>
      </div>
    </el-row>
  </section>
</template>
<script>
import { userlogout } from 'api/txEquipment/index'
import store from 'src/store'
export default {
  data () {
    return {
      isCollapse: false,
      userInfo: {} // 用户信息
    }
  },
  async created () {
    this.userInfo = JSON.parse(localStorage.getItem('txUserInfo'))
  },
  beforeRouteEnter (to, from, next) {
    if (to.name === 'home') {
      (async () => {
        let setSystemInfo = await store.dispatch('setSystemInfo')
        let lists = setSystemInfo.copyRouter
        next({name: lists[0].children[0].name})
      })()
    } else {
      next()
    }
  },
  methods: {
    dropClick (value) { // 下拉菜单
      if (value === '1') {
        userlogout().then(res => {
          window.localStorage.removeItem('accessToken')
          this.$router.push({name: 'login'})
        })
      } else if (value === '2') {
        this.$router.push({name: 'changePassword'})
      }
    }
  }
}
</script>
<style>
  .el-menu {
    border-radius: 2px;
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 0;
    background-color: #eef1f6;
  }
  .el-menu-item:hover {
    background-color: #d1dbe5;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 160px;
    min-height: 650px;
  }
</style>
<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all .2s ease;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
.container {
  width: 100%;
  height: 100%;
}
.header {
  height: 80px;
  line-height: 80px;
  background: #545c64;
  color:#fff;
  padding: 0 30px;
  .logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-top: -8px;
  }
  .name {
    font-size: 26px;
    margin-left: 10px;
  }
  .drop-menu {
    color: #fff;
    line-height: 0;
  }
}
.content {
  position: absolute;
  top: 80px;
  width: 100%;
  bottom: 0px;
  .side {
    height: 100%;
  }
  .el-menu {
    min-height: calc(100% - 1px);
    height: calc(100% - 1px);
    overflow: auto;
    margin-top: 1px;
  }
  .side {
    // width: 210px;
    .el-menu-item {
      font-size: 16px;
    }
  }
}
.content-box {
  height: 100%;
  overflow-y: auto;
  position: relative;
  background: #edf1f7;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.content-box > div::-webkit-scrollbar, .content-box > section::-webkit-scrollbar, .content-box::-webkit-scrollbar
{
  width: 6px;
  height: 12px;
  background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
.content-box > div::-webkit-scrollbar-track, .content-box > section::-webkit-scrollbar-track, .content-box::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgb(152, 172, 219);
  border-radius: 6px;
  background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
.content-box > div::-webkit-scrollbar-thumb, .content-box > section::-webkit-scrollbar-thumb, .content-box::-webkit-scrollbar-thumb
{
  border-radius: 6px;
  -webkit-box-shadow: inset 0 0 6px #98a8ce;
  background-color: rgb(138, 136, 136);
}
.content-box > div {
  min-width: 1180px;
}
.content-box > section {
  min-width: 1180px;
}
.el-menu {
  border-radius: 2px;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #ffffff;
}
.is-active{
  background-color: #f9fafd !important;
}
.el-menu-item:hover {
  background-color: #f9fafd;
}
</style>
